<template>
  <div class="choose-person">
    <!-- 位置信息 -->
    <div class="position-info">{{ position }}号位置</div>
    
    <!-- 阵营信息 -->
    <div v-if="camp && camp !== ''" class="camp-info">{{ camp }}</div>
    
    <!-- 上部分：英雄显示区域 -->
    <div class="hero-section">
      <div class="hero-display">
        <!-- 如果charactor为0，显示白色背景和问号 -->
        <div v-if="charactor === 0" class="no-hero">
          <div class="question-mark">?</div>
        </div>
        <!-- 否则显示英雄图片 -->
        <img v-else :src="heroImageUrl" alt="hero" class="hero-image" />
      </div>
      
      <!-- 技能名称覆盖层 -->
      <div class="skills-overlay">
        <div v-if="skill1_name && skill1_name !== ''" class="skill-item skill1">{{ skill1_name }}</div>
        <div v-if="skill2_name && skill2_name !== ''" class="skill-item skill2">{{ skill2_name }}</div>
        <div v-if="skill3_name && skill3_name !== ''" class="skill-item skill3">{{ skill3_name }}</div>
      </div>
      
      <!-- 判定信息 -->
      <div v-if="judge && judge !== ''" class="judge-info">{{ judge }}</div>
    </div>
    
    <!-- 下部分：用户信息 -->
    <div class="user-section">
      <div class="user-info">
        <img :src="profileImageUrl" alt="profile" class="profile-image" />
        <div class="user-details">
          <div class="nickname">{{ nickname }}</div>
          <div class="card-count">🂠 : {{ leftcard }}</div>
        </div>
      </div>
      <div class="blood-section">
        <div class="blood-dots">
          <div 
            v-for="i in blood_limit" 
            :key="i" 
            class="blood-dot"
            :class="{ 'filled': i <= blood, 'empty': i > blood }"
          ></div>
        </div>
      </div>
    </div>
    
    <!-- 受伤覆盖层 -->
    <div v-if="isInjured" class="injure-overlay">
      <div class="injure-cross"></div>
    </div>
    
    <!-- 治疗覆盖层 -->
    <div v-if="isCured" class="cure-overlay"></div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { charactors } from '@/charactors/data.js'

// 受伤状态
const isInjured = ref(false)

// 治疗状态
const isCured = ref(false)

// 定义props
const props = defineProps({
  profile: {
    type: String,
    required: true
  },
  nickname: {
    type: String,
    required: true
  },
  charactor: {
    type: Number,
    required: true
  },
  leftcard: {
    type: Number,
    required: true
  },
  blood_limit: {
    type: Number,
    required: true
  },
  blood: {
    type: Number,
    required: true
  },
  skill1_name: {
    type: String,
    default: ''
  },
  skill2_name: {
    type: String,
    default: ''
  },
  skill3_name: {
    type: String,
    default: ''
  },
  judge: {
    type: String,
    default: ''
  },
  camp: {
    type: String,
    default: ''
  },
  position: {
    type: Number,
    required: true
  }
})

// 计算英雄图片URL
const heroImageUrl = computed(() => {
  if (props.charactor === 0) return ''
  const heroName = charactors.get(props.charactor)
  return `http://117.72.17.45:5500/data/charactors/${heroName}.webp`
})

// 计算头像图片URL
const profileImageUrl = computed(() => {
  return `http://117.72.17.45:5500/data/profiles/${props.profile}`
})

// 受伤动画函数
const show_injure = () => {
  isInjured.value = true
  
  // 2秒后恢复正常状态
  setTimeout(() => {
    isInjured.value = false
  }, 2000)
}

// 治疗动画函数
const show_cure = () => {
  isCured.value = true
  
  // 1.5秒后恢复正常状态
  setTimeout(() => {
    isCured.value = false
  }, 1500)
}

// 监听blood参数变化
watch(() => props.blood, (newValue, oldValue) => {
  console.log('blood参数变化:', {
    oldValue: oldValue,
    newValue: newValue,
    nickname: props.nickname
  })
  
  // 当血量减少时自动调用受伤动画
  if (newValue < oldValue) {
    show_injure()
  }
  
  // 当血量增加时自动调用治疗动画
  if (newValue > oldValue) {
    show_cure()
  }
})

// 暴露函数给父组件
defineExpose({
  show_injure,
  show_cure
})
</script>

<style scoped>
.choose-person {
  width: 200px;
  height: 270px;
  background: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
}

.hero-section {
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-display {
  width: 120px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.no-hero {
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ddd;
}

.question-mark {
  font-size: 48px;
  font-weight: bold;
  color: black;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 技能名称覆盖层 */
.skills-overlay {
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 8px;
  pointer-events: none;
  z-index: 100;
}

.skill-item {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 2px 6px;
  margin: 2px 0;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
}

.skill-item.skill1 {
  background: rgba(255, 0, 0, 0.6);
}

.skill-item.skill2 {
  background: rgba(0, 255, 0, 0.6);
}

.skill-item.skill3 {
  background: rgba(0, 0, 255, 0.6);
}

/* 位置信息 */
.position-info {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff6b6b;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  z-index: 102;
}

/* 阵营信息 */
.camp-info {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 165, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 102;
}

/* 判定信息 */
.judge-info {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(80, 0, 80, 0.6);
  color: #fff;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
  z-index: 101;
}

.user-section {
  height: 35%;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.user-info {
  height: 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.profile-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ddd;
}

.user-details {
  height: 100%;
  width: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.blood-section {
  height: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blood-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.blood-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #4caf50;
}

.blood-dot.filled {
  background-color: #4caf50;
}

.blood-dot.empty {
  background-color: transparent;
}

.nickname {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-count {
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

/* 受伤覆盖层 */
.injure-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
  animation: injureAnimation 2s ease-in-out;
}

.injure-cross {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translateX(-50%);
  background: linear-gradient(60deg, transparent 48%, rgb(205, 0, 0) 48%, rgb(205, 0, 0) 52%, transparent 52%);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* 受伤动画 */
@keyframes injureAnimation {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(1.1);
  }
  40% {
    opacity: 0.8;
    transform: scale(0.95);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  80% {
    opacity: 0.9;
    transform: scale(0.98);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* 治疗覆盖层 */
.cure-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 255, 0, 0.3);
  z-index: 999;
  pointer-events: none;
  animation: cureAnimation 1.5s ease-in-out;
}

/* 治疗动画 */
@keyframes cureAnimation {
  0% {
    opacity: 0;
    background-color: rgba(0, 255, 0, 0);
  }
  20% {
    opacity: 1;
    background-color: rgba(0, 255, 0, 0.4);
  }
  50% {
    opacity: 1;
    background-color: rgba(0, 255, 0, 0.3);
  }
  80% {
    opacity: 0.8;
    background-color: rgba(0, 255, 0, 0.2);
  }
  100% {
    opacity: 0;
    background-color: rgba(0, 255, 0, 0);
  }
}
</style>
